<template>
  <view v-if="orderInfo">
    <u-navbar height="50" title="订单详情" title-size="36" title-color="#333"></u-navbar>
    <view class="layoutView">
      <view class="orderStatus">{{ orderInfo.statusName }}</view>
      <view
        v-if="orderInfo.deliveryType == 1"
        class=""
        style="font-size: 28rpx; line-height: 50rpx"
      >
        <view class="order-address">
          {{ orderInfo.receiverDetailAddress }}
        </view>
        <view class="order-contacts">
          {{ orderInfo.receiverName }}&nbsp;&nbsp;{{ orderInfo.receiverMobile }}
        </view>
      </view>
      <view v-if="orderInfo.deliveryType == 4">
        <view class="store-info dis-flex flex-y-between flex-y-center">
          <view class="store-left" style="flex: 1">
            <view>
              {{ orderInfo.shop.name }}
            </view>
            <view class="store-add">
              {{ orderInfo.shop.fullAddress }}
            </view>
          </view>
          <view class="right" @click="onApply">申请退款</view>
        </view>
        <view class="dis-flex flex-y-between flex-y-center" @click="toClerk">
          <view class="order-code">
            {{ formatCode(orderInfo.verifyCode) }}
          </view>
          <u-image :src="orderInfo.qrcode" width="90rpx" height="90rpx"></u-image>
        </view>
      </view>
    </view>
    <view class="layoutView">
      <view class="layoutText">商品信息</view>
      <view class="order-goods" v-for="(item2, index) in goodsList" :key="index">
        <u-image
          class="goods-img"
          border-radius="8"
          :src="item2.picUrl"
          width="160rpx"
          height="160rpx"
        ></u-image>
        <view class="orde-riget" style="flex: 1">
          <view class="goods-title">
            {{ item2.spuName }}
          </view>
          <view class="goods-speci">
            {{ item2.properties[0].valueName }}
            <text class="goods-num">x{{ item2.count }}</text>
          </view>
          <view class="goods-price"> ¥{{ item2.price * 0.01 }} </view>

          <!-- <view @click="onApply(item2)" v-if="item2.afterSaleStatus == 0" style="display: inline-block;border-radius: 10rpx; padding: 0 10rpx; border: 2rpx solid black;">
						退款申请
					</view>
					<view v-else @click="onAfterDetail(item2.afterSaleId)" style="display: inline-block;border-radius: 10rpx; padding: 0 10rpx; border: 2rpx solid black;">
						退款详情
					</view> -->
        </view>
      </view>
      <view style="margin-top: 20rpx"></view>
      <u-line color="#E3E4E6"></u-line>
      <view class="moneyView">
        <view class="moneyTitle">
          <view>商品总价</view>
        </view>
        <view class="moneyText">¥{{ priceTotal * 0.01 }}</view>
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="moneyView" v-if="orderInfo.deliveryPrice > 0">
        <view class="moneyTitle">
          <view>配送费用</view>
        </view>
        <view class="moneyText" v-if="Number(orderInfo.deliveryPrice) > 0"
          >¥{{ orderInfo.deliveryPrice * 0.01 }}
        </view>
        <view class="moneyText" v-else>包邮</view>
      </view>
      <u-line color="#E3E4E6"></u-line>
      <view class="allPriceView">
        <text class="allTitle">共{{ orderInfo.productCount }}件 实际支付：</text>
        <text class="allPrice" style="color: red">¥{{ orderInfo.payPrice * 0.01 }}</text>
      </view>
    </view>
    <view class="layoutView" v-if="orderInfo">
      <view class="orderTitle">订单信息</view>
      <view class="orderText">交易单号：{{ orderInfo.no }}</view>
      <view class="orderText">创建时间：{{ orderInfo.createTime }}</view>
      <view class="orderText" v-if="orderInfo.distribution_type == 1">订单类型：配送到家</view>
      <view class="orderText" v-if="orderInfo.distribution_type == 2">订单类型：到店自提</view>
      <view class="orderText" v-if="orderInfo.remark">订单备注：{{ orderInfo.remark }}</view>
      <view v-if="orderInfo.distribution">
        <view class="orderText" v-if="orderInfo.distribution.express_company">
          物流公司：{{ orderInfo.distribution.express_company }}</view
        >
        <view class="orderText" v-if="orderInfo.distribution.express_number">
          <view style="flex: 1">快递单号：{{ orderInfo.distribution.express_number }}</view>
          <view @click="onCopy(orderInfo.distribution.express_number)">复制</view>
        </view>
      </view>
    </view>
    <u-gap height="100"></u-gap>
    <view class="footer-box">
      <view class="bottomView">
        <text
          class="hollow-btn"
          v-if="orderInfo.status == 0"
          @click.stop.prevent="onOrderCancel(orderInfo)"
          >取消订单</text
        >
        <text
          class="solid-btn"
          v-if="orderInfo.status == 0"
          @click.stop.prevent="onOrderPayment(orderInfo)"
          >立即支付</text
        >
        <text
          class="hollow-btn"
          @click="onExpress"
          v-if="orderInfo.status == 10 && orderInfo.deliveryType == 1"
          >查看物流</text
        >
        <text
          class="solid-btn"
          @click="toClerk"
          v-if="orderInfo.status == 10 && orderInfo.deliveryType == 4"
          >去核销</text
        >
        <text class="solid-btn" v-if="orderInfo.status == 20" @click.stop.prevent="onOrderConfrim()"
          >确认收货</text
        >
        <text
          class="solid-btn"
          v-if="orderInfo.status == 30 && !orderInfo.commentStatus"
          @click.stop.prevent="onComment()"
          >立即评价</text
        >
      </view>
    </view>

    <u-popup
      :closeable="true"
      close-icon-pos="top-left"
      v-model="show2"
      mode="bottom"
      height="auto"
      border-rad
      border-radius="15"
    >
      <view class="popup-box">
        <view class="popup-title"> 发表评论 </view>

        <view class="goods-start">
          <text>商品评价</text>
          <view class="start-bar">
            <u-rate size="50" active-color="#FBC258" v-model="form.scores"></u-rate>
          </view>
        </view>

        <view class="">
          <view class=""> 评论内容 <text style="color: #999999">（至少15字以上）</text> </view>
          <textarea
            v-model="form.content"
            style="width: 100%; height: 120rpx; margin: 15rpx 0; font-size: 28rpx"
            name=""
            placeholder="商品满足您的期待吗？说说它的优点和美中不足吧。"
            id=""
            cols="50"
            rows="20"
          ></textarea>
        </view>

        <view class="image-group">
          <view class="">
            图片<text style="color: #999999">（{{ fileList ? fileList.length : 0 }}/3）</text>
          </view>
          <view class="" style="margin-top: 20rpx">
            <u-upload
              :custom-btn="true"
              :action="action"
              max-count="3"
              ref="uUpload"
              :file-list="fileList"
              :before-upload="beforeFileUpload"
              @on-remove="onFileRemove"
            >
              <view
                slot="addBtn"
                class="slot-btn"
                hover-class="slot-btn__hover"
                hover-stay-time="150"
              >
                <u-icon name="/static/xj.png" size="80"></u-icon>
                <view style="color: #999999">添加照片</view>
              </view>
            </u-upload>
          </view>
        </view>
        <view class="" style="margin-bottom: 100rpx"></view>

        <view class="fixed-wapper">
          <view class="submit-btn" @click="pushComment"> 提交评价 </view>
        </view>
      </view>
    </u-popup>

    <PayPopup :show="show" :payOrderId="payOrderId" :resStatus="resStatus">
      <p style="font-size: 50rpx; font-weight: 600; padding: 20rpx; text-align: center">
        ¥{{ realPay }}
      </p>
    </PayPopup>
  </view>
</template>

<script>
import PayPopup from '@/components/PayPopup.vue'
import { BASE_URL, UP_URL } from '@/common/config'
export default {
  components: {
    PayPopup
  },
  data() {
    return {
      show: false,
      show2: false,
      orderId: '',
      orderInfo: null,
      resStatus: '',
      payOrderId: '',
      realPay: '',
      fileList: [],
      starNum: [1, 2],
      starNum2: [1, 2, 3],
      goodsList: [],
      leval: '',
      form: {
        content: '',
        scores: 5,
        orderId: null,
        picUrls: []
      },
      action: BASE_URL + UP_URL
    }
  },
  onLoad(res) {
    this.orderId = res.id ? res.id : ''

    if (this.starNum.length < 2) {
      this.leval = '差'
    } else if (this.starNum.length < 4) {
      this.leval = '一般'
    } else {
      this.leval = '优秀'
    }
  },
  onShow() {
    this.initData()
  },
  computed: {
    priceTotal: function () {
      let price = 0
      this.goodsList.forEach((item) => {
        price += item.price * item.count
      })
      return price
    }
  },
  methods: {
    formatCode(code) {
      return code
        .replace(/\s/g, '')
        .replace(/[^\d]/g, '')
        .replace(/(\d{3})(?=\d)/g, '$1 ')
    },
    initData() {
      let self = this
      self.$u.api
        .getOrderDetail({
          id: this.orderId
        })
        .then((res) => {
          self.orderInfo = res.data
          self.goodsList = res.data.items
        })
    },
    onLocation(store) {
      uni.openLocation({
        latitude: Number(store.address_lat),
        latitude: Number(store.address_lng),
        success() {}
      })
    },
    onCallPhone(store) {
      uni.makePhoneCall({
        phoneNumber: store.phone,
        fail(res) {
          uni.$u.toast(JSON.stringify(res))
        }
      })
    },
    onComment() {
      this.show2 = true
    },
    onCopy(number) {
      let self = this
      uni.setClipboardData({
        data: number,
        success: function () {
          self.$u.toast('复制成功')
        }
      })
    },

    onOrderCancel() {
      let self = this
      uni.dialog.confirm('温馨提示', '确定要取消订单吗？', () => {
        self.$u
          .get('/app-api/trade/order/cancel', {
            id: this.orderInfo.id
          })
          .then((res) => {
            self.$u.toast('取消成功')
            setTimeout(function () {
              self.onOrderLoad(self.current, null, true)
            }, 500)
          })
      })
    },
    onOrderPayment() {
      this.payOrderId = this.orderInfo.no
      this.realPay = this.orderInfo.payPrice * 0.01
      // uni.$on("pop", (e) => {
      //   if (e == 2) {
      //     this.initData();
      //   }
      //   this.show = false;
      // });
      this.resStatus = 2
      this.show = true
    },
    onOrderConfrim() {
      let self = this
      uni.dialog.confirm('温馨提示', '该订单确认收货吗？', () => {
        self.$u.post('/app-api/trade/order/receive?id=' + this.orderInfo.id).then((res) => {
          self.$u.toast('收货成功')
          setTimeout(function () {
            uni.navigateBack()
          }, 500)
        })
      })
    },

    onApply() {
      this.$utils.route('/other/apply-after-sales/apply-after-sales?id=' + this.orderInfo.id)
    },
    toClerk() {
      if (this.orderInfo.qrcode) {
        uni.setStorageSync('verify_qrcode', this.orderInfo.qrcode)
      }
      this.$utils.route('/goods/order-qrcode/order-qrcode?verifyCode=' + this.orderInfo.verifyCode)
    },

    onAfterDetail(id) {
      this.$utils.route('/other/after-sales/after-sales?id=' + id + '&status=1')
    },

    onExpress() {
      uni.navigateTo({
        url:
          '/other/express-process/express-process?id=' +
          this.orderInfo.id +
          '&goodsJson=' +
          JSON.stringify(this.orderInfo.items[0])
      })
    },
    beforeFileUpload(_index, list) {
      this.fileList = list
    },
    onFileRemove(_index, list) {
      this.fileList = list
    },
    pushComment() {
      let self = this
      self.form.orderId = self.orderId
      self.$refs.uUpload.lists.forEach((val) => {
        self.form.picUrls.push(val.response.data)
      })
      if (self.form.scores == 0) {
        self.$u.toast('评价最低为1分')
        return
      }
      if (self.form.content == '') {
        self.$u.toast('请输入评价内容')
        return
      }
      self.$u.post('/app-api/product/comment/create', self.form).then((res) => {
        if (res.code === 0) {
          self.form.content = ''
          self.form.scores = 5
          self.form.orderId = null
          self.form.picUrls = []
          self.show2 = false
        } else {
          self.$u.toast(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import url('@/style/btn.css');

page {
  background: #f2f2f2;
}
.layoutView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10rpx;
  margin: 20rpx;
  padding: 20rpx;
}

.orderStatus {
  font-size: 42rpx;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20rpx;
}

.order-address {
}
.mer-chat {
  padding: 8rpx 0;
  border-top: #ededed solid 2rpx;
  margin-top: 10rpx;
  display: flex;
}

.layoutText {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20rpx;
}

.order-goods {
  display: flex;
}

.goods-img {
  border-radius: 20rpx;
}

.orde-riget {
  width: 100%;
  margin-left: 10rpx;
  line-height: 55rpx;
  font-size: 26rpx;
}

.goods-speci {
  position: relative;
  font-size: 24rpx;
  color: #999999;
}

.goods-num {
  position: absolute;
  top: 0;
  right: 0;
  color: #999999;
}
.goods-price {
  font-size: 30rpx;
  color: #f54831;
}

.locationView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 10rpx;
  padding-bottom: 20rpx;
}

.address {
  flex: 1;
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-left: 10rpx;
}

.codeView {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30rpx;
}

.codeTitle {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
}

.codeNumber {
  font-size: 60rpx;
  font-weight: bold;
  color: #333333;
  margin-top: 10rpx;
  margin-bottom: 30rpx;
}

.codeText {
  font-size: 24rpx;
  font-weight: 400;
  color: #ffbd0b;
}

.goodsView {
  display: flex;
  flex-direction: row;
  padding: 20rpx 0px;
}

.goodsIcon {
  width: 150rpx;
  height: 150rpx;
  background: #bee4fa;
  border-radius: 10rpx;
}

.goodsData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
}

.goodsName {
  display: flex;
  flex-direction: row;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.skuView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.goodsSku {
  flex: 1;
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.goodsNum {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.goodsPrice {
  font-size: 30rpx;
  font-weight: 400;
  color: #e60012;
}

.moneyView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30rpx 0px;
}

.moneyTitle {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
  display: flex;
  flex-direction: column;
}

.moneyTitle text {
  font-size: 22rpx;
  color: #999;
}

.moneyText {
  font-size: 28rpx;
  color: #333333;
}

.allPriceView {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 30rpx 0px;
}

.allPrice {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.orderView {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.orderView text {
  font-size: 32rpx;
  font-weight: 400;
  color: #fb391d;
}

.orderTitle {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  margin-bottom: 10rpx;
}

.orderText {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-top: 10rpx;
}
.footer-box {
  background: #ffffff;
  box-shadow: 0px -3px 10px 0px rgba(153, 153, 153, 0.1);
  position: fixed;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  bottom: 0;
  width: 100%;
}
.bottomView {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx;
  width: 100%;
  height: 96rpx;
}

.itemBtn2 {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1px solid #e6e6e6;
  border-radius: 35rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  margin-right: 20rpx;
}
.goods-title {
  line-height: 36rpx;
}
.popup-box {
  padding: 20rpx;
}

.popup-title {
  font-size: 36rpx;
  text-align: center;
}

.goods-start {
  border-top: #ededed solid 2rpx;
  border-bottom: #ededed solid 2rpx;
  padding: 30rpx 0;
  margin: 20rpx 0;
  display: flex;
  align-items: center;
}

.start-bar {
  display: inline-block;
  margin: 0 45rpx;
}

.start {
  margin: 0 13rpx;
}

.image-group {
  /* margin-bottom: 100rpx; */
  padding-bottom: 15rpx;
  border-bottom: #ededed solid 2rpx;
}
.submit-btn {
  width: 94%;
}
.store-info {
  margin-bottom: 20rpx;
  .store-left {
    font-size: 30rpx;
    .store-add {
      font-size: 24rpx;
      color: #666666;
    }
  }
  .right {
    width: 150rpx;
    height: 60rpx;
    border-radius: 30rpx;
    border: 1px solid #e6e6e6;
    line-height: 60rpx;
    color: #666666;
    text-align: center;
  }
}
.order-code {
  font-weight: 600;
  font-size: 36rpx;
  color: #333333;
}
.slot-btn {
  width: 200rpx;
  height: 200rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}
</style>
